<template>
	<view class="edit_duty_box">
		<view class="edit_sduty_left">
			<view class="edit_title">
				活动主题:
			</view>
			<view class="edit_title">
				参与人数:
			</view>
			<view class="edit_title">
				中奖人数:
			</view>
		</view>
		<view class="edit_sduty_right">
			<view class="right_item">
				<MyInput v-model="formData.title" inputWidth="100%" placeholder="点我填写活动主题名"/>
			</view>
			 <view class="right_item">
				<uni-number-box v-model="formData.part_in_nums"/>
			 </view>
			 <view class="right_item">
				<uni-number-box v-model="formData.checked_nums"/>
			 </view>
		</view>
	</view>
</template>

<script setup>
	import {ref,watch} from 'vue'
	
	import MyInput from '@/components/MyInput/MyInput.vue'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		verifyIsLogin
	} from '@/hooks/verify.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	
	const emits=defineEmits(['changeEditLotEmit'])
	
	const {
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const props=defineProps({
		editLotFormData:{
			type:Object
		}
	})
	
	const formData = ref({})
	
	watch(()=>props.formData,()=>{
		const data={...props.editLotFormData}
		formData.value = data
	},{immediate:true})
	
	watch(()=>formData.value,()=>{
		emits('changeEditLotEmit',formData.value)
	},{deep:true})
</script>

<style lang="less">
	.edit_duty_box{
		padding: 0 50rpx;
		display: flex;
		.edit_sduty_left{
			width: 35%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.edit_title{
				width: 100%;
				color: v-bind(primary_text_color);
			}
		}
		.edit_sduty_right{
			width: 65%;
			display: flex;
			flex-wrap: wrap;
			.right_item{
				width: 100%;
				margin: 10rpx;
			}
		}
		.item{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: v-bind(primary_text_color);
			margin: 20rpx 0;
			.item_right{
				padding-left: 10rpx;
			}
		}
	}
</style>